<template>
    <div>
        <image class="x-topimage" :src="listData.topimage"></image>
        <div class="x-content" >
            <div class="box-item" v-for="(data,index) in listData.data" :key="index">
                <image class="x-image" :src="data.thumb"></image>
                <div class="x-title-div">
                    <text class="x-text1">{{data.title}}</text>
                    <text class="x-text2">{{data.reason}}</text>
                </div>
            </div>
        </div>
    </div>
</template>
<style scoped>
    .iconfont {
        font-family:iconfont;
    }
    .x-content {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        width: 750px;
        background-color: #fff;
        padding-bottom:40px;
    }
    
    .box-item{
        width: 350px;
        height: 390px;
        margin: 6px;
        background-color: #fff;
        border-width: 1px;
        border-color: #a9aabc;
    }
    .x-title-div {
        height: 110px;
        justify-content: center;
    }
    .x-image {
        width: 350px;
        height: 280px;
    }

    .x-topimage {
        width: 750px;
        height: 158px;
        margin-top:15px;
    }
    .x-text1 {
        padding-left:15px;
        color:#222;
        font-size: 28px;
    }
    .x-text2 {
        padding-left:15px;
        color:#af0a28;
        font-size: 22px;
    }
</style>
<script>
    export default {
        props:["listData"],
        data () {
            return {
                
            }
        },
        methods: {
            onchange (event) {
                
            }
        }
    }
</script>